<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar>
      <!-- 左边 -->
      <template #left>
        <div class="logo"></div>
        <!-- <van-button round icon="search">搜索</van-button> -->
      </template>
      <!-- 右边 -->
      <template #right>
        <van-button round icon="search" @click="$router.push('/search')">搜索</van-button>
      </template>
    </van-nav-bar>
    <!-- 频道栏 -->
    <!-- v-model双向绑定选中的索引 -->
    <van-tabs v-model="active">
      <!-- 频道 -->
      <van-tab v-for="item in ownList" :key="item.id" :title="item.name">
        <article-list :channel_id="item.id" />
      </van-tab>

      <!-- 图标 -->
      <div class="icon-box">
        <van-icon name="wap-nav" @click="$refs.channelEdit.show = true" />
      </div>
    </van-tabs>
    <!-- 频道管理 -->
    <!-- <channel-edit
      ref="channelEdit"
      :ownList="ownList"
      :allList="allList"
      :value="active"
      @input="active = $event"
    /> -->
    <channel-edit
      ref="channelEdit"
      :ownList="ownList"
      :allList="allList"
      v-model="active"
    />
  </div>
</template>

<script>
import ChannelEdit from './ChannelEdit.vue'
import { ownChannel, allChannelAPI } from '@/api/channel'
//导入局部组件
import ArticleList from './ArticleList.vue'
export default {
  components: {
    ArticleList,
    ChannelEdit
  },
  data () {
    return {
      active: 0,
      //保存自己的频道
      ownList: [],
      //使用变量存把全部频道存起来
      allList: []
    }
  },
  async created () {
    //没有登录要获取本地存储
    const local = JSON.parse(localStorage.getItem('channels'))
    //登录了要发送请求，本地没有数据也要发送请求
    if (this.$store.state.tokenObj.token || !local) {

      //发送请求获取用户自己的频道
      const res = await ownChannel()
      // console.log(res)
      this.ownList = res.data.channels

    } else {
      this.ownList = local
    }




    //获取所有的频道并转给子组件
    const res1 = await allChannelAPI()
    // console.log('res1',res1)
    this.allList = res1.data.channels
    // console.log(this.allList)
  }
}
</script>

<style lang="less" scoped>
.van-nav-bar {
  .logo {
    width: 120px;
    height: 46px;
    background: url(../../assets/logo.png) no-repeat center / contain;
  }

  .van-button {
    width: 100px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    .van-icon-search {
      color: #fff;
    }
  }
}
.van-tabs {
  ::v-deep .van-tabs__nav {
    margin-right: 36px;
  }

  .icon-box {
    position: absolute;
    right: 0;
    top: 0;
    background-color: #fff;
    .van-icon {
      font-size: 36px;
    }
  }
}
//默认情况下，内容会撑开盒子，盒子会撑开body，body会撑开html导致整个页面出现了滚动条
//如果希望整个页面不要有滚动条，那就意味着要给盒子一个固定的高度，并且要设置超出隐藏
//就会把滚动条变成盒子自己的滚动条
//特点：一个盒子定位后，不给高度的情况下，通过top和bottom能拉出一个动态的高度
//总结：如果我希望新闻列表那个区域有滚动条，而不是整个页面有滚动条，就需要给新闻列表加定位，
//并设置bottom,以及overflow auto
.article-list {
  position: fixed;
  width: 100%;
  top: 90px;
  bottom: 50px;
  overflow: auto;
}
</style>
